<template>
    <div class="adplan-container">
        <div class="form-row">
            <div class="el-form-item__label required-label">
                <span>广告展示平台</span><span class="required-tip">&nbsp;*</span><span>：</span>
            </div>

            <div class='tag-box-border'>
                <div>
                    <el-radio :disabled="FbDisable" style="width:130px;margin-left:30px;" v-model="adPlatform" label="Facebook"></el-radio>
                    <el-radio :disabled="GgDisable" style="width:130px;" v-model="adPlatform" label="Google"></el-radio>
                </div>

                <div class="line"></div>

                <div class="form-row-inner" v-show="adPlatform == 'Google'" style="position:relative">
                    <span class="form-label">
                        <span>您的网站地址</span><span class="required-tip">&nbsp;*</span><span>：</span>
                    </span>
                    <el-input class="el-input-title" v-model="adverUrl" placeholder="请输入您要推广的网址" style="width:360px;margin-bottom:0" :class="urlError ? 'el-form-item is-error':''" @keyup.enter.native="planNext"></el-input>
                </div>

                <div class="form-row-inner" v-show="adPlatform == 'Facebook'">
                    <div class="form-label" style="float:left;">
                        <span>广告目标</span><span class="required-tip">&nbsp;*</span><span>：</span>
                    </div>
                    <el-input v-model="adverPlan" style="height:0;width:0;overflow:hidden"></el-input>
                    <div @click='checkImg(item,index)' v-for="(item, index) in selectPlan" class="plan-card" :class="item.check?'plan-card-active':''">
                        <div class="card-img" v-if="index == 0">
                            <span class="iconfont icon-visite" style="font-size:36px;"></span>
                        </div>
                        <div class="card-img" v-if="index == 1" style="padding-left:25px;">
                            <span  class="iconfont icon-brand"></span>
                        </div>
                        <div class="card-img-praise" v-if="index == 2">
                            <span class="iconfont icon-praise"></span>
                        </div>
                        <span v-if="index == 2" class="bottom-title-praise">{{item.name}}</span>
                        <span v-if="index == 0 || index == 1" class="bottom-title">{{item.name}}</span>
                    </div>
                    <span v-show="adverPlan == '访问量'" class="plan-tips">吸引更多用户访问 Facebook 站内或站外的目标网页</span>
                    <span v-show="adverPlan == '品牌知名度'" class="plan-tips">向更多对品牌感兴趣的用户展示广告，提高您的品牌知名度！</span>
                    <span v-show="adverPlan == '主页赞'" class="plan-tips">给您的相关主页获取更多主页赞</span>
                </div>

                <div class="form-row-inner" style="position:relative">
                    <span class="form-label">
                        <span>广告系列名称</span><span class="required-tip">&nbsp;*</span><span>：</span>
                    </span>
                    <el-input class="el-input-title" style="width:360px;margin-bottom:0" :maxlength="50" :class="nameError ? 'el-form-item is-error':''" v-model.trim="adverName" @blur="Autocomplete" @keyup.enter.native="planNext"></el-input>
                    <span class="adc-tips string-counts"  @click="edit($event)">{{nowLength}}</span>
                </div>

            </div>
        </div>
        <el-button v-if="!nexting" @click="planNext" class="bd-next-btn" type="primary" style="margin-left:130px;">下一步</el-button>
        <el-button v-else class="bd-next-btn" type="primary" :loading="true" style="margin-left:130px;">验证中</el-button>
    </div>
</template>
<style>
</style>
<script>
    import Vue from 'vue'
    import { mapGetters, mapActions, mapMutations} from 'vuex';
    import {isURL, getCookie,charCodeLen,charCodeLens} from '~/assets/js/global.js'
    import { Row,Col,Button,Checkbox,Input,Form,FormItem,MessageBox,Message,Card} from 'element-ui'
    Vue.use(Row)
    Vue.use(Col)
    Vue.use(Button)
    Vue.use(Checkbox)
    Vue.use(Input)
    Vue.use(Form)
    Vue.use(FormItem)
    Vue.use(Card)
    Vue.prototype.$message = Message;
    Vue.prototype.$confirm = MessageBox.confirm;

    export default{
        data () {
            return {
                dataName: "",
                adverName: '',
                adverUrl:'http://',
                urlError :false,
                nameError :false,
                adverPlan: '访问量',
                objective: 'LINK_CLICKS',
                adPlatform : "",
                nowPlatform :'',
                nexting: false,
                selectPlan:[
                    {
                        name: '访问量',
                        objective:'LINK_CLICKS',
                        check: true
                    },{
                        name: '品牌知名度',
                        objective:'BRAND_AWARENESS',
                        check: false
                    },{
                        name: '主页赞',
                        objective:'PAGE_LIKES',
                        check: false
                    }
                ],
                FbDisable:true,
                GgDisable:true,
                userData:null,
                nowLength: 50,
                stepCreated: false
            }
        },
        computed : {
            ...mapGetters([
                "createdStep",
                'getBindFacebook',
                "getBindGoogle"
            ])
        },
        created() {

            //this.$store.commit('ACTIVE_STEP', {step:"1"});
            //this.$store.commit('CREATED_STEP', {step:"1"});

            let time = new Date();
            let year = (time.getFullYear()+"").substr(2,2);
            let month = (time.getMonth()+1)<10?"0"+(time.getMonth()+1):(time.getMonth()+1)+"";
            let day = time.getDate()<10?"0"+time.getDate():time.getDate()+"";
            let hour = time.getHours()<10?"0" + time.getHours() : time.getHours();
            let minu = time.getMinutes()<10?"0" + time.getMinutes() : time.getMinutes();
            this.dataName = year+month+day+hour+minu+'-';
            this.cashName = this.dataName + this.adverPlan;

            // this.autoAdverName();

            //获取缓存信息
            // this.$store.dispatch("adSeriesCacheValue").then((res)=>{
            // })
        },
        mounted(){
            //获取用户信息
            if(this.getBindFacebook){
                this.FbDisable = false;
                this.adPlatform = 'Facebook';
            }else{
                this.FbDisable = true
            }

            if(this.getBindGoogle){
                this.GgDisable = false;
                this.adPlatform = this.getBindFacebook?'Facebook':'Google';
            }else{
                this.GgDisable = true
            }

            this.watchPlatform(true)
        },
        watch:{
            adPlatform(){
                if(this.createdStep >='2' && this.adPlatform != this.nowPlatform){
                    this.$confirm('存在编辑中的广告，确定切换至：'+this.adPlatform+'平台吗?', '提示', {
                          confirmButtonText: '确定',
                          cancelButtonText: '取消',
                          type: 'warning'
                      }).then(() => {
                        this.stepCreated = false;
                        this.$store.commit('INIT_STEP', {step:"INIT"});
                        this.$store.commit('ACTIVE_STEP', {step:"1"});
                        this.$store.commit('CREATED_STEP', {step:"1"});
                        this.watchPlatform(true)

                      }).catch(() => {
                            this.adPlatform = this.nowPlatform;
                        });
                }else{
                    this.watchPlatform(false)
                }
                this.nexting = false;
                this.urlError = false;
                this.nameError = false;
                
            },
            adverUrl(){
                //this.urlError = !isURL(this.adverUrl);
                this.$store.commit('ADVER_URL', {item:this.adverUrl});
            },
            adverName(){
                this.nowLength = 50 - charCodeLen(this.adverName);
            }
        },
        methods:{

            //检测是否可用
            watchPlatform(init){
                if(this.FbDisable && this.GgDisable){
                    this.adPlatform = '';
                }else if(this.FbDisable && !this.GgDisable){
                    this.adPlatform = 'Google';
                }else if(this.GgDisable && !this.FbDisable) {
                    this.adPlatform = 'Facebook'
                }else{
                    
                }
                this.nowPlatform = this.adPlatform;
                this.$store.commit('AD_PLATFORM', {item:this.adPlatform});
                if(init){
                    this.$store.commit("INIT_AUDIENCE", {init:true})
                }
                if(this.nowPlatform == 'Facebook'){
                    this.autoAdverName();
                }else{
                    this.autoAdverNameGg();
                }
                
            },
            //自动名称
            autoAdverName(){
                //let planIndex = 1;
                //this.dataName = year+month+day+hour+minu+'-'+this.adverPlan;
                this.adverName = this.dataName + this.adverPlan;
                this.cashName = this.dataName + this.adverPlan;
            },
            //自动名称
            autoAdverNameGg(){
                //let planIndex = 1;
                //this.dataName = year+month+day+hour+minu+'-'+this.adverPlan;
                this.adverName = this.dataName + "广告系列";
            },
            Autocomplete(){
                if(this.adverName) return;
                if(this.nowPlatform == 'Facebook'){
                    this.autoAdverName();
                }else{
                    this.autoAdverNameGg();
                }
            },
            //选择目标1
            checkImg(item,index){
                this.selectPlan.forEach((n,i)=>{
                    n.check = i == index?true:false
                });
                this.adverPlan = item.name;
                this.objective = item.objective;
                if(this.cashName == this.adverName)this.autoAdverName();
                this.$store.commit('ADVER_NAME', {item:this.adverName});
                this.$store.commit('ADVER_PLAN', {item:this.adverPlan});
            },
            edit(e) {
                let input = e.target.parentNode.querySelectorAll('input')[0];
                setTimeout(() => {
                    input.focus();
                }, 0);
            },
            commitStep(){
                let params = {
                    // ifLoading:false,
                    name:this.adverName,
                    objective:this.objective
                }
                // this.$store.dispatch("saveAdSeries",params)
                //     .then((res)=>{
                //         if(res.data.success){
                let item = [
                    {
                        created:true,//是否完成本步编辑
                        click:true,     //是否可点击
                        style:"li-created",//样式分为default/active/created
                        step:'1',
                        title:"广告目标",
                        info:"广告目标",
                        icon:'el-icon-check'//图标分为√和>
                    }
                ]
                this.$store.commit('ADSTEP_LIST_CREATED', {item});
                this.$store.commit('ADVER_NAME', {item:this.adverName});
                this.$store.commit('ADVER_PLAN', {item:this.adverPlan});
                this.$store.commit('ADVER_URL', {item:this.adverUrl});
                this.$store.commit('ACTIVE_STEP', {step:"2"});
                if(!this.stepCreated){
                    this.$store.commit('CREATED_STEP', {step:"2"});
                    this.stepCreated = true;
                }

            },
            //下一步
            planNext(){
                // let args = 'name=hansin'
                // var img = new Image(1,1);
                // img.src = 'http://www.onloon.com/1.gif?' + args;
                // let bt = document.querySelectorAll("#next");
                if(this.FbDisable && this.GgDisable){
                    this.$message({ type: 'error', message: '请至少绑定一个平台账号！'});
                    return;
                }
                if(this.adPlatform == 'Google'){
                    this.nexting = true;

                    // if(!this.adverUrl.includes('http://') && !this.adverUrl.includes('https://')){
                    //     this.adverUrl = 'http://' + this.adverUrl;
                    // }
                    /*url:http://www.baidu.com
                    *胡兴汉google
                    */
                    this.$store.dispatch("verifyWebUrl",{webUrl: this.adverUrl})
                    .then((res)=>{
                        if(res && res.data &&res.data.success){
                            //可用
                            this.urlError = false;
                            this.$store.dispatch("ggAdGroupName",{name:this.adverName})
                            .then((ret)=>{
                                this.nexting = false;
                                if(ret && ret.data &&res.data.success){
                                    //可用
                                    this.nameError = false;
                                    this.commitStep()
                                }else{
                                    //不可用
                                    this.nameError = true;
                                    return;
                                }
                            })
                        }else{
                            this.urlError = !res;
                            this.nexting = false;
                            return;
                        }
                    })
                }else{
                    this.nexting = true;
                    this.$store.dispatch("fbAdGroupName",{name:this.adverName})
                        .then((res)=>{
                            this.nexting = false;
                            if(res && res.data &&res.data.success){
                                this.nameError = false;
                                this.commitStep()
                            }else{
                                this.nameError = true;
                                return;
                            }
                        })
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    $MainColor: #0686F9;
    $lineColor: #D6E0E5;
    $disabelColor: #cccccc;
    $mainBorder: #EAEEF0;
    $planBgColor:rgba(6,134,249,0.10);
    $labelColor: #666666;
    $errorColor:#FF3526;
    $inputBorder:#D5DFE4;
    $wihte:#fff;
    .adplan-container{
        margin: 15px 0px;
        text-align: left;
    }
    .form-row{
        margin-bottom: 16px;
    }
    .form-row-inner{
        padding-left:10px;
        margin-bottom: 16px;
    }
    .form-label{
        display: inline-block;
        height: 36px;
        width: 115px;
        text-align: right;
        margin-right: 5px;
        font-size: 14px;
        color: $labelColor;
        vertical-align: top;
        span{
            display: inline-block;
            height: 36px;
            line-height: 36px;
        }
    }
    .required-label{
        display: inline-block;
        width: 130px;
        text-align: right;
        margin-right: 5px;
        font-size: 14px;
        color: $labelColor;
    }
    .tag-box-border{
        width: 674px;
        border:1px solid $inputBorder;
        padding-top:10px;
        border-radius: 4px;
        margin-left: 130px;
    }
    .line{
        border-bottom:1px solid $lineColor;
        margin: 10px 0 15px;
    }
    .plan-tips{
        display: block;
        margin-left: 118px;
        color:$disabelColor;
        max-width: 400px;
    }
    .required-tip{
        color:#FF3526;
    }
    .plan-card{
        cursor: pointer;
        color: $disabelColor;
        border:1px solid $mainBorder;
        border-radius: 4px;
        overflow: hidden;
        width: 88px;
        height: 88px;
        display:inline-block;
        margin-right:10px;
    }
    .plan-card-active{
        color:$MainColor;
        border:1px solid $MainColor;
        background: $planBgColor;
    }
    .plan-card:hover{
        color:$MainColor;
        border-color:$MainColor;
    }
    .card-img{
        padding:0px 22px;
        height: 55px;
        border: none;
        cursor:pointer;
    span{
        display: inline-block;
        font-size: 38px;
    }
    }

    .card-img-praise{
        padding:0px 20px;
        height: 50px;
        border: none;
        cursor:pointer;
    span{
        display: inline-block;
        font-size: 38px;
    }
    }

    .bottom-check{
        height: 30px;
    button{
        float: right;
    }
    }
    .bottom-title{
        display: block;
        font-size: 12px;
        text-align: center;
        padding-top:5px;
    }
    .bottom-title-praise{
        display: block;
        font-size: 12px;
        text-align: center;
        padding-top:10px;
    }
    .url-tip{
        display:block;
        float:left;
        position:absolute;
        left:130px;
        top:38px;
        color:$errorColor;
    }


    .adc-tips {
        line-height: 8px;
        color: #999;
        font-size: 12px;
        background: transparent
    }
    .string-counts {
        position: relative;
        text-align:center;
        float: right;
        right: 298px;
        top: 5px;
        display: inline-block;
        width: 20px;
        height: 28px;
        vertical-align: middle;
        line-height: 28px;
    }
    .bd-next-btn{
        width: 120px;
        height: 34px;
        border: none;
        border-radius: 34px;
        color: white;
        background-color: #ffb100;
    }
    .bd-next-btn:hover {
        background: #E59E00;
    }

</style>